<template lang="">
    <div class="out-side-box">
       <textarea class="input" v-model="val" />
       <div class="btn-list-box">
            <button>AI</button>
            <button>搜索</button>
       </div>
    </div>
    <!-- val: {{ val }} <br/>
    value: {{ value }} -->
</template>
<script>
export default {
    props: {
        value: {
            type: [Number, String],
            default: () => ''
        },
        // value: ''
    },
    data() {
        return {
            val: ''
        }
    },
    computed: {

    },
    watch: {
        val() {
            this.setValue()
        }
    },
    methods: {
        setValue() {
            this.$emit('change', this.val)
        }
    }
}
</script>
<style lang="scss" scoped>
.out-side-box{
    border: 1px solid #04a1eb;
    padding: 5px;
    border-radius: 5px;
    margin-bottom: 30px;
    display: flex;
    flex-direction: column;
    .input{
        border: none;
        outline: none;
        flex: 1;
        resize: none;
        line-height: 26px;
        font-size: 16px;
    }
    .btn-list-box{
        display: flex;
        justify-content: space-between;
        button{
            background: linear-gradient(136deg, #286aff, #4e6ef2, #7274f9, #9f66ff);
            border: none;
            color: #fff;
            font-size: 17px;
            width: 108px;
            height: 44px;
            border-radius: 15px;
        }
    }
}
</style>